<script setup>
// 操作按钮集合
import { getCurrentInstance, ref } from 'vue';
import { useRouter } from 'vue-router';
import { getToken } from '@/utils/cookie.js';
import { useLogin } from '@/mixins/login.js';

const router = useRouter();
const instance = getCurrentInstance();
const {unLoginClearCookie} = useLogin();

const { $message } = instance.appContext.config.globalProperties;
const operationBtn = [
  { label: '学位论文格式', value: 1, path: '/formatPaper' },
  { label: '期刊论文格式', value: 2, path: '/formatPeriodical' },
  // { label: '参考文献格式', value: 3, path: '/formatReference' },
];
// 用来判断是否已经登录
const isLogin = ref(false);
const token = getToken();
if (token) {
  isLogin.value = true;
}
// 跳转页面函数
function jumpPage(path) {
  if (path !== '/login' && !token) {
    $message.error('登录后可以使用当前功能，请登录！');
    return false;
  }
  router.push({ path });
}
// 切换账号
function changeLogin() {
  unLoginClearCookie();
  jumpPage('/login');
}
</script>

<template>
  <div class="home-view-box">
    <div class="login-btn-box">
      <div class="login-btn" v-show="!isLogin" @click="jumpPage('/login')">登录</div>
      <div class="login-btn" v-show="isLogin" @click="changeLogin">切换账号</div>
      <div class="login-btn personal-center" v-show="isLogin" @click="jumpPage('/personalCenter')">
        个人中心
      </div>
    </div>
    <div class="content-box">
      <div class="title">论文投稿排版</div>
      <div class="subtitle">
        2000+高校学位论文格式<span class="split-icon">|</span>8000+期刊投稿格式
      </div>
      <div class="operation-btn-box">
        <div
          class="operation-btn"
          v-for="item in operationBtn"
          :key="item.value"
          @click="jumpPage(item.path)"
        >
          {{ item.label }}
        </div>
      </div>
    </div>
    <div class="footer">
      <img src="../../assets/images/common/project-icon.png" alt="" />
      <span>本服务由学术进修课堂提供</span>
    </div>
  </div>
</template>
<style scoped lang="less">
@import './homeView.less';
</style>
